<!-- 管理-预算执行明细 业务量配套指标 -->
<template>
  <div class="business-box flex">
    <div class="expense-right flex-1 overflow-hidden p-8">
      <TableNew
        class="h-full"
        :loading="tableLoading"
        :data="tableData"
        :columns="columns"
        :pagination="pagination"
        @paginationChange="paginationChange"
      >
        <template #actionOther="{ row }">
          <el-button type="text" @click="appealFun(row)">申诉</el-button>
        </template>
      </TableNew>
    </div>

    <Dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :footer-btns="footerBtns"
      @submit="dialogSubmit"
      @cancel="dialogCancel"
    >
      <el-form>
        <el-form ref="dialogSelectForm" :model="dialogSelect" label-width="130px" class="demo-ruleForm">
          <el-form-item label="预算科目名称:">{{ dialogSelect.subjectName }}</el-form-item>
          <el-form-item label="预算科目编码:">{{ dialogSelect.subjectCode }}</el-form-item>
          <el-form-item label="部门编码:">{{ dialogSelect.deptCode }}</el-form-item>
          <el-form-item label="部门名称:">{{ dialogSelect.deptName }}</el-form-item>
          <el-form-item label="预算:">{{ formatMoney(dialogSelect.budgetRate) }}</el-form-item>
          <el-form-item label="执行:">
            <TableNew
              :data="[dialogSelect]"
              :columns="dialogTable"
              :hide-pagination="true"
            />
          </el-form-item>
          <el-form-item label="执行率/偏差率(%):">{{ formatMoney(dialogSelect.bias) }}</el-form-item>
          <el-form-item label="申诉理由:" prop="memo" :rules="[{ required: true, message: ',', trigger: 'blur' },]">
            <el-input v-model="dialogSelect.memo" type="textarea" placeholder="请输入申诉理由" />
          </el-form-item>
          <el-form-item label="上传附件:" class="dialog-up-file">
            <el-upload
              class="inline-block"
              action=""
              :auto-upload="false"
              :on-change="fileChange"
              :on-remove="remove"
              multiple
              :file-list="fileList"
            >
              <el-button icon="el-icon-upload2" size='mini' :loading="importLoading">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-form>
    </Dialog>
  </div>
</template>

<script>
import listMixins from '@/mixins/budgetQuert/listMixins'
import {
  listIndexInfo,
  ysIndexDetailAdd,
  ysIndexDetailGetObj
} from '@/api/budgetQuert'
import mixins from '@/pages/budgetQuert/ManagerExecute/mixins'
import upFileMixins from '@/mixins/budgetQuert/upFileMixins'

export default {
  name: 'Business',
  mixins: [listMixins, upFileMixins, mixins],
  data() {
    return {
      listInterface: listIndexInfo,
      appealInfo: ysIndexDetailGetObj,
      appealAdd: ysIndexDetailAdd,

      dialogTable: [
        {
          title: '三香(%)',
          dataIndex: 'sxImplementationRate',
          format: true,
          align: 'right'
        },
        {
          title: '浒关(%)',
          dataIndex: 'xgImplementationRate',
          format: true,
          align: 'right'
        },
        {
          title: '合计(%)',
          dataIndex: 'total',
          format: true,
          align: 'right'
        }
      ],

      columns: [
        {
          title: '预算科目名称',
          dataIndex: 'subjectName',
          width: 100
        },
        {
          title: '预算科目编码',
          dataIndex: 'subjectCode',
          width: 100
        },
        {
          title: '部门编码',
          dataIndex: 'deptCode',
          width: 100
        },
        {
          title: '部门名称',
          dataIndex: 'deptName',
          width: 100
        },
        {
          title: '预算(%)',
          dataIndex: 'budgetRate',
          width: 100,
          format: true,
          align: 'right'
        },
        {
          title: '执行',
          type: 'hasMerge',
          mergeList: [
            {
              title: '三香(%)',
              dataIndex: 'sxImplementationRate',
              format: true,
              align: 'right'
            },
            {
              title: '浒关(%)',
              dataIndex: 'xgImplementationRate',
              format: true,
              align: 'right'
            },
            {
              title: '合计(%)',
              dataIndex: 'total',
              format: true,
              align: 'right'
            }
          ]
        },
        {
          title: '执行率/偏差率(%)',
          dataIndex: 'bias',
          width: 100,
          format: true,
          align: 'right'
        },
        {
          title: '操作',
          dataIndex: 'actionOther',
          type: 'otherTag',
          fixed: 'right',
          width: 50
        }
      ],
      tableData: []
    }
  },
  methods: {

    dataReconstruction(res) {
      this.tableData = res.data.list
      this.pagination.total = res.data.total
    }
  }
}
</script>

<style lang="less" scoped>
.expense-left,
.expense-right {
  background-color: #FFFFFF;
  .el-button {
    padding: 0;
    font-size: 12px;
  }
}

.expense-left {
  min-width: 180px;
}
</style>
